<template>
    <div class="Home">
        <div class="top-content">
            <img src="../assets/callout.svg" alt="callout" class="w-50"/>
            <h2 class="font-weight-light">随心写作，自由表达</h2>
            <p>
                <a href="#" class="btn btn-primary my-2">开始写文章</a>
            </p>
        </div>
        <h4>发现精彩</h4>
        <column-list :list="column"/>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
import { GlobalDataProps } from './../store';
import ColumnList from './../components/ColumnList.vue';
export default defineComponent({
    name: 'Home',
    components: {
        ColumnList
    },
    setup() {
        const store = useStore<GlobalDataProps>();
        const column = computed(() => store.state.column);
        return {
            column
        }
    }
})
</script>

<style lang="less" scoped>
.Home {
    width: 1200px;
    margin: auto;
    .top-content {
        margin-top: 110px;
        text-align: center;
        img {
            width: 310px;
        }
        h2 {
            font-size: 32px;
            color: #212529;
            margin-bottom: 10px;
        }
        p {
            a {
                display: inline-block;
                width: 106px;
                height: 38px;
                color: #fff;
                background-color: #0d6efd;
                border-color: #0d6efd;
                font-size: 16px;
                border-radius: 5px;
                line-height: 38px;
            }
        }
    }
    h4 {
        font-size: 24px;
        margin-bottom: 24px;
        text-align: center;
        margin-top: 60px;
    }
}
</style>